<template>
	<view>
		<view style="height: 600rpx;background-color: #007AFF;">
			<view class="contitle"> 理发店预约系统</view>
		</view>
		<view class="conview">
			<view class="contitle1"> 理发店相关信息</view>
			<block v-for="(items,indexs) in indexList" :key='indexs'>
				<uni-grid :column="3" class="mygrid" :show-border='bor'>
					<block v-for="(item,index) in items" :key='index'>
						<view @click='tabClick(item.type)'>
							<uni-grid-item>
								<image class="gridimg" :src="item.img"></image>
								<text class="gridtext">{{item.title}}</text>
							</uni-grid-item>
						</view>
					</block>
				</uni-grid>
			</block>
		</view>
		<view class="intro">
			<button class="btn" @click="appointment()">开始预约</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bor:false,
				indexList:[
					[
						{
							type:'lfs',
							img:'../../static/icon/nv.png',
							title:'理发师介绍'
						},
						{
							type:'new',
							img:'../../static/icon/riqi.png',
							title:'店长查看'
						},
						{
							type:'introduce',
							img:'../../static/icon/lifadian.png',
							title:'理发店介绍'
						}
					],
					[
						{
							type:'select',
							img:'../../static/icon/xiang.png',
							title:'服务项目'
						},
						{
							type:'like',
							img:'../../static/icon/xin.png',
							title:'喜欢您来'
						},
						{
							type:'qua',
							img:'../../static/icon/zizhi.png',
							title:'资质证明'
						}
					]
				],
				imgList:[
                    '../../static/images/ban1.png',
                    '../../static/images/ban2.png',
                    '../../static/images/ban3.png',
                    '../../static/images/ban4.png',
                    '../../static/images/ban5.png',
                    '../../static/images/ban6.png',
                    '../../static/images/ban7.png',
                    '../../static/images/ban8.png',
                ],
                currentImg:0,  //当前默认选中
				timer: null    //定时器
			}
		},
		methods: {
			appointment(){
				var that = this;
				uni.getStorage({
				    key: 'token',
				    success: function (res) {
						console.log('开始预约');
						//console.log(res)
				        if(res.data)
						{
							that.$util.navigateTo('../appoint/appoint')
						}
						else{
							uni.showModal({
								title:'当前未登录请您登录',
								success: function(res){
									if (res.confirm){
										that.$util.navigateTo('../login/login');
									}
								}
							})
						}
				    },
					fail: (err) => {
						console.log(err);
						that.$util.navigateTo('../login/login')
					},
					complete: (c) => {
					}
				});
			},
			tabClick(type){
				switch (type){
					case 'lfs':
						console.log('理发师介绍');
						this.$util.navigateTo('../barber/barber')
						break;
					case 'new':
						console.log('店长查看');
						var that = this
						uni.getStorage({
						    key: 'admintoken',
						    success: function (res) {
						        if(res.data)
								{
									that.$util.navigateTo('../data/data')
								}
								else{
									uni.showModal({
										title:'当前未登录请您登录',
										success: function(res){
											if (res.confirm){
												that.$util.navigateTo('../adminlogin/adminlogin');
											}
										}
									})
								}
						    },
							fail: (err) => {
								console.log(err);
								that.$util.navigateTo('../adminlogin/adminlogin');
							},
							complete: (c) => {
							}
						});
						break;
					case 'introduce':
						console.log('理发店介绍');
						this.$util.navigateTo('../barbershop/barbershop')
						break;
					case 'like':
						console.log('常见发型');
						this.$util.navigateTo('../type/type')
						break;
					case 'select':
						console.log('服务项目');
						this.$util.navigateTo('../select/select')
						break;
					case 'qua':
						console.log('资质证明');
						this.$util.navigateTo('../qua/qua')
						break;
				}
			}			
		}
	}
</script>


<style>
.contitle{color: #FFFFFF;text-align: center;padding-top: 150rpx;font-size:38rpx;}
.contitle1{color: #000000;text-align: center;}
.conview{
	background-color: #FEFEFE; 
	width: 650rpx;
	border: #C0C0C0 solid 1rpx;  
	border-radius: 5rpx; 
	position: absolute;
	left: calc((100% - 650rpx) / 2); 
	top: 350rpx;
	padding: 20upx 0;
	}
.intro{top:950rpx;margin: auto;position: absolute;width: 500rpx; left:calc((100% - 500rpx) / 2);}
.gridimg{width: 100rpx;height: 100rpx;margin: auto;}
.gridtext{text-align: center;font-size: 28rpx;}
.btn{
		font-size:36rpx;
		text-align:center;
		color:white;
		background-color:#0055ff;
		height: 80rpx;
		line-height: 80rpx;
		width:300rpx;
	}

</style>
